// 审批申请类型分析
import React, { useEffect, useState } from 'react';
// import cn from 'classnames';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import styles from '@/pages/Organization/Hr/index.less';
import colors from '@/theme';
import { sortArrayByIndex } from '@/utils/utils';

const Type = ({ data }) => {
    const [selectedIndex, setSelectedIndex] = useState(0);
    const children = data[selectedIndex]
        ? data[selectedIndex].children || []
        : [];
    const count = data.reduce((prev, cur) => prev + cur.value, 0);
    useEffect(() => {
        const hasValueItem = data.findIndex(item => item.value > 0);
        setSelectedIndex(hasValueItem || 0);
    }, [data]);
    return (
        <Card
            bordered={false}
            title="审批申请类型分析"
            style={{ position: 'relative' }}
        >
            {!data || data.length === 0 ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <div className={styles.gwgl} style={{ height: 300 }}>
                    <ReactEcharts
                        style={{
                            width: '100%',
                            height: 30
                        }}
                        option={{
                            legend: {
                                type: 'scroll',
                                data: data.map(item => item.name)
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: '0%',
                                    tooltip: {
                                        show: false
                                    },
                                    center: ['50%', '60%'],
                                    data,
                                    label: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    animation: false
                                }
                            ]
                        }}
                    />
                    <div className={styles.bar}>
                        <div>
                            {data.map((item, index) => (
                                <div
                                    className={
                                        index === selectedIndex
                                            ? styles.active
                                            : ''
                                    }
                                    key={item.name}
                                    onClick={() => setSelectedIndex(index)}
                                    style={{
                                        width: `${(item.value / count) * 100}%`,
                                        background: colors[index]
                                    }}
                                />
                            ))}
                        </div>
                    </div>
                    <ReactEcharts
                        option={{
                            color: sortArrayByIndex(colors, selectedIndex),
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: '30%',
                                    center: ['50%', '50%'],
                                    data: children.map((item, index) => ({
                                        ...item,
                                        itemStyle: {
                                            opacity: 1 - 0.1 * index
                                        }
                                    })),
                                    label: {
                                        normal: {
                                            formatter: '{b}\n{d}%'
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            lineStyle: {
                                                color: 'rgba(0,0,0,.3)'
                                            }
                                        }
                                    }
                                }
                            ]
                        }}
                        style={{
                            background: '#fff',
                            flex: 1
                        }}
                    />
                </div>
            )}
        </Card>
    );
};

export default Type;
